<!DOCTYPE html>
<html class="root">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no" />
    <title>Web Audio Player</title>
    <link rel="stylesheet" type="text/css" href="styles/style.css">
    <link rel="manifest" href="manifest.json">
    <!--Font awesome图标字体库-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>

<body id="body">
    <!--主元素-->
    <div id="main">
        <!--双击操作-->
        <div class="control left-top" id="togglemenu" data-menushow="true"></div>
        <div class="control right-top" id="togglefullscreen"></div>
        <div class="control left-bottom" id="toggleplay"></div>
        <div class="control right-bottom" id="togglereplay"></div>
        <!--音轨-->
        <audio id="audio"></audio>
        <!--菜单-->
        <div class="container" id="menu">
            <!--菜单按钮-->
            <div class="left-entry">
                <div id="showmenu" class="icon-btn" title="关闭菜单"><i class="fa fa-close"></i></div>
                <div data-playing="false" id="play" class="icon-btn" title="播放/暂停"><i class="fa fa-play" id="play-icon"></i></div>
                <div id="fullscreen" class="icon-btn" title="全屏模式"><i class="fa fa-expand" id="fullscreen-icon"></i></div>
                <div id="replay" class="icon-btn" title="重新播放"><i class="fa fa-refresh"></i></div>
            </div>
            <div class="center-entry">
                <label class="file-btn" id="audio-file-btn" for="files">上传文件</label>
                <input type="file" id="files">
            </div>
            <div class="right-entry">
                <div class="showwindow icon-btn" data-window="store" title="商店"><i class="fa fa-archive"></i></div>
                <div class="showwindow icon-btn" data-window="about" title="关于"><i class="fa fa-info"></i></div>
                <div class="showwindow icon-btn" data-window="help" title="帮助"><i class="fa fa-question"></i></div>
                <!--<div class="showwindow inline" data-window="stylesettings">外观</div>-->
                <div class="showwindow icon-btn" data-window="settings" title="设置中心"><i class="fa fa-cog"></i></div>
            </div>
            <div id="progress-container" class="hide">
                <input type="range" id="progress" min="0" value="0">
            </div>
        </div>
        <!--窗口-->
        <div id="windows">
            <!--帮助窗口-->
            <div class="window" id="help" style="top:5px;left:5px;z-index:0;">
                <div class="toolbar" data-window="help">
                    <i class="fa fa-question"></i> 帮助
                    <div class="toolbarbuttons">
                        <div class="toolbar-btn maximum"><i class="fa fa-window-maximize"></i></div>
                        <div class="toolbar-btn close" data-window="help"><i class="fa fa-close"></i>
                        </div>
                    </div>
                </div>
                <!--<iframe src="docs/help.html"></iframe>-->
                <div class="content">
                    <div>
                        <div class="large">简介</div>
                        <div class="regular">
                            这是一个在线音频播放器，可以自行导入音频并播放(详见<a href="https://github.com/User782Tec/audio-player/#readme"
                                target="_blank">本仓库的README文件</a>)
                        </div>
                        <div class="large">菜单</div>
                        <div class="regular">
                            <i class="fa fa-close"></i>: 关闭菜单<br />
                            <i class="fa fa-play"></i>/<i class="fa fa-pause"></i>: 播放/暂停<br />
                            <i class="fa fa-expand"></i>/<i class="fa fa-compress"></i>: 进入/退出全屏模式<br />
                            <i class="fa fa-refresh"></i>: 重新播放<br />
                            <i class="fa fa-info"></i>: 打开关于窗口<br />
                            <i class="fa fa-question"></i>: 打开帮助窗口
                        </div>
                        <div class="large">双击操作</div>
                        <div class="regular">
                            左上角: 显示/隐藏菜单<br />
                            右上角: 进入/退出全屏模式<br />
                            左下角: 播放/暂停<br />
                            右下角: 重新播放
                        </div>
                        <div class="large">使用方法</div>
                        <ol>
                            <li>通过“上传文件”按钮上传自己的音频文件;</li>
                            <li>点击<i class="fa fa-play"></i>按钮播放。</li>
                        </ol>
                    </div>
                </div>
            </div>
            <!--关于窗口-->
            <div class="window" id="about" style="top:5px;left:5px;z-index:1;">
                <div class="toolbar" data-window="about">
                    <i class="fa fa-info"></i> 关于
                    <div class="toolbarbuttons">
                        <div class="toolbar-btn maximum"><i class="fa fa-window-maximize"></i></div>
                        <div class="toolbar-btn close" data-window="about"><i class="fa fa-close"></i></div>
                    </div>
                </div>
                <!--<iframe src="docs/about.html"></iframe>-->
                <div class="content">
                    <div class="regular">
                        作者: User782Tec<br />
                        仓库地址: <a href="https://github.com/User782Tec/audio-player"
                            target="_blank">User782Tec/audio-player</a><br />
                        当前版本: 0.4.2beta12<br />
                        最后更新日期: 2023.2.25
                    </div>
                </div>
            </div>
            <!--外观窗口-->
            <div class="window" id="stylesettings" style="top:5px;left:5px;z-index:2;">
                <div class="toolbar" data-window="stylesettings">
                    <i class="fa fa-desktop"></i> 外观与个性化
                    <div class="toolbarbuttons">
                        <div class="toolbar-btn maximum"><i class="fa fa-window-maximize"></i></div>
                        <div class="toolbar-btn close" data-window="stylesettings"><i class="fa fa-close"></i></div>
                    </div>
                </div>
                <div class="regular content">
                    <div class="window-title large">颜色主题</div>
                    <div class="button showwindow" data-window="store">点击前往商店下载</div>
                    <div class="window-title large">背景</div>
                    <label class="background-type" data-open="static-color" data-close="linear-gradient"><input type="radio" name="background" checked="checked" data-open="static-color" data-close="linear-gradient">静态颜色</label><br />
                    <div class="selector" id="static-color" data-color="white">
                        <div class="bgcolorpicker colorpicker" data-color="red"></div>
                        <div class="bgcolorpicker colorpicker" data-color="orange"></div>
                        <div class="bgcolorpicker colorpicker" data-color="yellow"></div>
                        <div class="bgcolorpicker colorpicker" data-color="green"></div>
                        <div class="bgcolorpicker colorpicker" data-color="cyan"></div>
                        <div class="bgcolorpicker colorpicker" data-color="blue"></div>
                        <div class="bgcolorpicker colorpicker" data-color="purple"></div>
                        <div class="bgcolorpicker colorpicker" data-color="black"></div>
                        <div class="bgcolorpicker colorpicker selected" data-color="white"></div>
                        <label class="bgcolorpicker colorpicker colorselector" data-color="black">
                            <input type="color" id="bgcolorselect">
                            <i class="fa fa-ellipsis-h ellipsis"></i>
                        </label>
                    </div>
                    <label class="background-type" data-open="linear-gradient" data-close="static-color"><input type="radio" name="background" data-open="linear-gradient" data-color="static-color">渐变色</label>
                    <div class="selector disabled" id="linear-gradient">
                        <div>
                            从 <span id="gradient-from">下</span> 至
                            <div class="select" id="gradient-from-to" tabindex="-1">
                                <div class="select-title"><span id="gradient-to">上</span><div class="select-arrow"><i class="fa fa-sort-down"></i></div></div>
                                <div class="select-content">
                                    <div class="option linear-gradient-option option-selected" data-to="上" data-from="下" data-value="top">上</div>
                                    <div class="option linear-gradient-option" data-to="下" data-from="上" data-value="bottom">下</div>
                                    <div class="option linear-gradient-option" data-to="左" data-from="右" data-value="left">左</div>
                                    <div class="option linear-gradient-option" data-to="右" data-from="左" data-value="right">右</div>
                                    <div class="option linear-gradient-option" data-to="左上" data-from="右下" data-value="left top">左上</div>
                                    <div class="option linear-gradient-option" data-to="左下" data-from="右上" data-value="left bottom">左下</div>
                                    <div class="option linear-gradient-option" data-to="右上" data-from="左下" data-value="right top">右上</div>
                                    <div class="option linear-gradient-option" data-to="右下" data-from="左上" data-value="right bottom">右下</div>
                                </div>
                            </div>
                        </div>
                        <div id="addcolor" class="button"><i class="fa fa-plus"></i> 添加颜色</div>
                        <div id="linear-gradient-colors"></div>
                    </div>
                    <div class="window-title large">高级样式</div>
                    修改样式(开发者)
                    <div>
                        <textarea id="style-editor" spellcheck="false"></textarea>
                    </div>
                    <div>
                        <div class="button" id="commit">更新</div>
                        <div class="button" id="getstyles">生成配置</div>
                        <div class="button" id="downloadstyles">下载配置</div>
                    </div>
                </div>
            </div>
            <div class="window" id="store" style="top:5px;left:5px;z-index:3;">
                <div class="toolbar" data-window="store">
                    <i class="fa fa-archive"></i> 商店
                    <div class="toolbarbuttons">
                        <div class="toolbar-btn maximum"><i class="fa fa-window-maximize"></i></div>
                        <div class="toolbar-btn close" data-window="store"><i class="fa fa-close"></i></div>
                    </div>
                </div>
                <div class="content regular">
                    <div class="section">
                        <div class="window-title large">颜色主题</div>
                        <div class="buttons right">
                            <div class="button" id="refresh-styles">刷新</div>
                        </div>
                    </div>
                    <div id="color-theme"></div>
                </div>
            </div>
            <div class="window" id="settings" style="top:5px;left:5px;z-index:4;">
                <div class="toolbar" data-window="settings">
                    <i class="fa fa-cog"></i> 设置中心
                    <div class="toolbarbuttons">
                        <div class="toolbar-btn maximum"><i class="fa fa-window-maximize"></i></div>
                        <div class="toolbar-btn close" data-window="settings"><i class="fa fa-close"></i></div>
                    </div>
                </div>
                <div class="content regular">
                    <div class="tab-container">
                        <div class="tab large showwindow" data-window="stylesettings">
                            <i class="fa fa-desktop"></i>
                            外观与个性化
                            <div class="details">
                                颜色主题｜背景｜菜单外观｜按钮外观｜高级样式
                            </div>
                        </div>
                        <div class="tab large showwindow" data-window="audiosettings"> 
                            <i class="fa fa-sliders"></i>
                            音频播放设置(未实现)
                            <div class="details">
                                (待补充)
                            </div>
                        </div>
                        <div class="tab large showwindow" data-window="userinterface">
                            <i class="fa fa-tablet"></i>
                            UI设置(未实现)
                            <div class="details">
                                歌词｜进度条｜文本｜图片｜音频播放数据｜(待补充)
                            </div>
                        </div>
                        <div class="tab large showwindow" data-window="visualization">
                            <i class="fa fa-signal"></i>
                            音频可视化设置(未实现)
                            <div class="details">
                                (待补充)
                            </div>
                        </div>
                        <div class="tab large showwindow" data-window="advanced">
                            <i class="fa fa-cogs"></i>
                            高级设置(未实现)
                            <div class="details">
                                兼容性解决方案｜(待补充)
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="scripts/main.js" type="module"></script>
</body>

</html>